<template>
  <div class="fliter_nav_container">
    <div class="item" @click="reset">综合</div>
    <a-dropdown>
      <div class="item">{{ formattedPriceSort }}</div>
      <template #overlay>
        <a-menu @click="priceClick">
          <a-menu-item key="desc">价格从高到低</a-menu-item>
          <a-menu-item key="asc">价格从低到高</a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
    <div class="price">
      <input ref="minRef" v-model.number="minPrice" placeholder="¥" @input="inputHandle" />
      <span> - </span>
      <input ref="maxRef" v-model.number="maxPrice" placeholder="¥" @input="inputHandle" />
      <button @click="filterByPrice">确定</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
// import { message } from 'ant-design-vue';
import type { MenuProps } from 'ant-design-vue';
import { useGoodsStore } from '@/stores/module/goods/goods';
import { useRoute } from 'vue-router';

const route = useRoute();
//获取价格排序的值
const priceSort = ref<string>('');
const priceClick: MenuProps['onClick'] = ({ key }) => {
  priceSort.value = key as string;
  goodsStore.searchParams.sortField = 'price';
  goodsStore.searchParams.sortOrder = priceSort.value;
}
const goodsStore = useGoodsStore()
watch(priceSort, () => {
  goodsStore.initGoodsList({ sortField: 'price', sortOrder: priceSort.value, description: route.query.description as string })
})
const formattedPriceSort = computed(() => {
  switch (priceSort.value) {
    case 'desc':
      return '价格从高到低';
    case 'asc':
      return '价格从低到高';
    default:
      return '价格';
  }
});

// 获取价格范围
const minRef = ref<HTMLInputElement | null>(null);
const maxRef = ref<HTMLInputElement | null>(null);
const minPrice = ref<number | null>(null);
const maxPrice = ref<number | null>(null);

const inputHandle = (e: Event) => {
  const target = e.target as HTMLInputElement;
  const value = target.value;
  // 过滤输入，只保留正数部分
  const positiveValue = value.replace(/[^0-9]/g, '');
  if (target === minRef.value) {
    minPrice.value = positiveValue ? Number(positiveValue) : null;
  } else if (target === maxRef.value) {
    maxPrice.value = positiveValue ? Number(positiveValue) : null;
  }
};

const filterByPrice = () => {
  if (minPrice.value !== null && maxPrice.value !== null && minPrice.value > maxPrice.value) {
    [minPrice.value, maxPrice.value] = [maxPrice.value, minPrice.value];
  }


  goodsStore.searchParams.priceMin = minPrice.value;
  goodsStore.searchParams.priceMax = maxPrice.value;
  console.log({
    // description: route.query.description as string,
    ...goodsStore.searchParams
  });
  goodsStore.initGoodsList({
    ...goodsStore.searchParams
  })
};
//综合排序,重置
const reset = () => {
  minPrice.value = null;
  maxPrice.value = null;
  priceSort.value = '';
  goodsStore.$reset()
  goodsStore.searchParams.description = route.query.description as string;
  goodsStore.initGoodsList({
    description: route.query.description as string,
    ...goodsStore.searchParams
  })
}
</script>

<style lang="less" scoped>
@import '../../../assets/css/primary/index.less';

.fliter_nav_container {
  box-sizing: content-box;
  padding: 5px 0;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;

  .item {
    padding: 0 20px;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    margin-right: 8px;
    font-size: 16px;
    cursor: pointer;

    span {
      width: 100%;
      line-height: 40px;
    }

    &:hover {
      background-color: #f3f3f3;
    }
  }

  .price {
    padding: 3px;
    display: flex;
    align-items: center;
    border: 1px solid transparent;

    &:hover {
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    input {
      width: 80px;
      padding: 5px;
      margin: 0 5px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
      outline: none;


    }

    button {
      margin-right: 3px;
      padding: 5px 10px;
      background-color: @primary-color;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.1s ease;
    }

    &:hover button {
      opacity: 1;
    }
  }
}
</style>
